

<template>
  <div class="codeEditBox">

      <aceEditor @input="onInput" ref="editor" :lang="lang" :value="value" :theme="currTheme" :options="options" @init="initEditor" v-bind="config">
      </aceEditor>
    <div class="ext-container">
        <select @change="themeChange">
            <option v-for="t in themes" :key="t" :value="t" >
                {{t}}
            </option>
        </select>
    </div> 
  </div>
</template>
<script>
//引入vue2-ace-editor
import aceEditor from 'vue2-ace-editor'
//引入ace 后续修改自定义标签用到
import ace from 'brace'
//代码提示
import 'brace/ext/language_tools'

import 'brace/mode/javascript'
import 'brace/mode/json'
import 'brace/mode/java'
import 'brace/mode/python'

import 'brace/snippets/javascript'
import 'brace/snippets/java'
import 'brace/snippets/python'
//搜索
import 'brace/ext/searchbox'
//主题

import 'brace/theme/ambiance'           
import 'brace/theme/chaos'              
import 'brace/theme/chrome'             
import 'brace/theme/clouds'             
import 'brace/theme/clouds_midnight'    
import 'brace/theme/cobalt'             
import 'brace/theme/crimson_editor'     
import 'brace/theme/dawn'               
import 'brace/theme/dracula'            
import 'brace/theme/dreamweaver'        
import 'brace/theme/eclipse'            
import 'brace/theme/github'           
import 'brace/theme/gob'              
import 'brace/theme/gruvbox'        
import 'brace/theme/idle_fingers'   
import 'brace/theme/iplastic'       
import 'brace/theme/katzenmilch'    
import 'brace/theme/kr_theme'       
import 'brace/theme/kuroir'         
import 'brace/theme/merbivore'      
import 'brace/theme/merbivore_soft' 
import 'brace/theme/mono_industrial'
import 'brace/theme/monokai'        
import 'brace/theme/pastel_on_dark' 
import 'brace/theme/solarized_dark'
import 'brace/theme/solarized_light'
import 'brace/theme/sqlserver'
import 'brace/theme/terminal'
import 'brace/theme/textmate'
import 'brace/theme/tomorrow'
import 'brace/theme/tomorrow_night'
import 'brace/theme/tomorrow_night_blue'
import 'brace/theme/tomorrow_night_bright'
import 'brace/theme/tomorrow_night_eighties'
import 'brace/theme/twilight'
import 'brace/theme/vibrant_ink'
import 'brace/theme/xcode'

import themes from '@/utils/importTheme.js';

export default {
  name: 'AceEditor',
  components: {
      aceEditor
  },
  props: {
      value: {
          type: String,
          default: ''
      },
      readOnly: {
          type: Boolean,
          default: false
      },
      theme: {
          type: String,
          default: 'vscode'
      },
      lang:{
        type: String,
        default: 'javascript'
      },
      config: {
          type: Object,
          default: () => {
              return {
                  fontSize: 16
              }
          }
      }
  },
  mounted() {
      this.currTheme = this.theme
  },
  data() {
      return {
        currTheme:'',
        themes: themes
      }
  },
  computed: {
      options() {
          return Object.assign({
              lang: 'javascript',//语言
              enableBasicAutocompletion: true,//启动代码补全功能
              enableSnippets: true,//启动代码段
              showPrintMargin: false,//显示打印边距
              fontSize: this.config.fontSize,//字体大小
              enableLiveAutocompletion: true,//启用实时自动完成
              readOnly: this.readOnly//只读
          },this.config,{
            readOnly: this.readOnly,
            theme: this.theme,
            lang:this.lang
          })
      }
  },
  methods: {
      initEditor(editor) {
          //自定义标签
          const that = this
          const completer = {
              getCompletions: function (editors, session, pos, prefix, callback) {
                  that.setCompleteData(editors, session, pos, prefix, callback)
              }
          }
          const lnTools = ace.acequire('ace/ext/language_tools')
          lnTools.addCompleter(completer)
          // 监听值的变化
          editor.getSession().on('change', () => {
              this.$emit('change', editor.getValue())
          })
      },
      getValue() {//获取值
          return this.$refs.editor.editor.getValue()
      },
      setValue(value) {//赋值
          this.$refs.editor.editor.session.setValue(value)
      },
      clear() {//清空
          this.$refs.editor.editor.session.setValue('')
      },
      hasEditorError() {
          var annotations = this.$refs.editor.editor.getSession().getAnnotations();
          for (var aid = 0, alen = annotations.length; aid < alen; ++aid) {
              if (annotations[aid].type === 'error') {
                  return true;
              }
          }
          return false;
      },
      setCompleteData(editor, session, pos, prefix, callback) {
          const data = [
              {
                  meta: '方法名', // 描述
                  caption: 'get', // 展示出的名字（一般与value值相同）
                  value: 'function get(){}', // 数据值
                  score: 1 // 权重 数值越大 提示越靠前
              },
              {
                  meta: '方法名',
                  caption: 'set',
                  value: 'function set(){}',
                  score: 2
              }
          ]
          if (prefix.length === 0) {
              return callback(null, [])
          } else {
              return callback(null, data)
          }
      },
      themeChange(event){
        // console.log(event.target.value)
        this.currTheme = event.target.value
      },
      onInput(content){
        this.$emit('input',content)
      }
  }
}
</script>
<style scoped>
.codeEditBox{
    position: relative;
}
.ext-container{
    /* border:1px solid red; */
    /* height: 30px; */
    position: absolute;
    /* width: 160px; */
    top:0;
    right:16px;

}
</style>
